<template>
  <div :id="id" :class="className" :style="{height:height,width:width}"/>
</template>

<script>
import * as echarts from 'echarts'
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'score-chart'
    },
    id: {
      type: String,
      default: 'score-chart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    },
    data: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      this.chart.setOption(
        {
          title: {
            text: '得分率分布',
            textStyle: {
              fontSize: 16
            }
          },
          grid: {
            left: '5%',
            width: '90%'
          },
          xAxis: [{
            type: 'time',
            boundaryGap: false,
            min: function (value) {
              return value.min - 24 * 60 * 60 * 1000; // 最小值少一天
            },
            max: function (value) {
              return value.max + 24 * 60 * 60 * 1000;  // 最大值多一天
            },
            minInterval: 3600 * 24 * 1000, // 保证最小刻度未天
          }],
          yAxis: {
            type: 'value',
            max: 1,
            min: 0,
            axisLabel: {
              formatter(value) {
                return value * 100 + '%'
              }
            }
          },
          series: [
            {
              symbolSize: 10,
              data: this.data,
              type: 'scatter',
              markLine: {
                lineStyle: {
                  type: 'solid',
                  color: '#FBB54B',
                  width: 3,
                  shadowColor: 'rgba(65,65,65,0.65)',
                  shadowOffsetY: 2,
                  shadowBlur: 5
                },
                precision: 2, // 平均线的精度
                label: {
                  formatter(obj) {
                    return obj.value * 100 + '%'
                  }
                },
                data: [
                  {
                    name: '平均线',
                    // 支持 'average', 'min', 'max'
                    type: 'average'
                  }
                ]
              }
            }
          ]
        }
      )
    }
  }
}
</script>
